<template>
  <div class="recommend-wrap">
    <div class="nav-bar">
      <nav-bar :title="tabTitle"></nav-bar>
    </div>
    <div class="ad">
      <!-- <router-link to="/" tag="span" class="iconfont niceiconset0143"></router-link> -->
    </div>
    <div class="lists" id="toolbar">
      <div class="title">
        <h2>
          <b>{{day}}</b>
          /{{month}}
        </h2>
        <p>根据你的音乐口味，为你推荐好音乐。</p>
        <span class="dot left"></span>
        <span class="dot right"></span>
      </div>
      <div class="top" @click="sequencePlayAll">
        <span class="iconfont niceicon-9"></span>播放全部
      </div>
      <div class="item-wrapper" ref="wrapper">
        <div class="scroll">
          <div
            class="item"
            v-for="(item, index) of recommend"
            :key="item.id"
            @click="playerItem(item, index)"
          >
            <div class="pic">
              <img :src="item.album.picUrl" />
            </div>
            <div class="txt">
              <h2 class="name">{{item.name}}</h2>
              <div class="author">
                <b v-if="item.privilege.subp === 0">vip</b>
                <span
                  class="author-item"
                  v-for="author of item.artists"
                  :key="author.id"
                >{{author.name}}</span>
                - {{item.album.name}}
              </div>
            </div>
            <div class="iconfont nicegengduo more"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapActions } from 'vuex'
import NavBar from '@/components/Navbar'
export default {
  name: 'recommend',
  data () {
    return {
      recommend: [],
      tabTitle: '每日推荐',
      songlists: []
    }
  },
  components: {
    NavBar
  },
  computed: {
    // 获取当天日期
    day () {
      let date = new Date()
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return day
    },
    month () {
      let date = new Date()
      let month = date.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      return month
    }
  },
  methods: {
    // 获取每日推荐歌曲
    async getRecommend () {
      this.$toast.loading({
        mask: true,
        message: '加载中...'
      })
      try {
        let res = await this.$api.getRecommend()
        this.$toast.clear()
        this.recommend = res.recommend
        this.songlists = this.recommend.map((item, index) => {
          let newSongObj = {
            'al': item.album,
            'ar': item.artists,
            'name': item.name,
            'id': item.id
          }
          return newSongObj
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 点击播放歌曲
    async playerItem (item, index) {
      try {
        let res = await this.$api.getSongUrl(item.id)
        let url = res.data[0].url
        if (url) {
          this.selectPlay({
            list: this.songlists,
            index,
            url
          })
        } else {
          this.$toast({
            message: '可能要vip，换一首吧'
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 播放全部
    sequencePlayAll () {
      this.sequencePlay({
        list: this.songlists
      })
    },
    ...mapActions([
      'selectPlay',
      'sequencePlay'
    ])
  },
  created () {
    this.getRecommend()
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, {
        mouseWheel: true
      })
    })
  }
}
</script>

<style lang="stylus" scoped>
.recommend-wrap {
  height: 100%;
}

.ad {
  width: 100%;
  height: 4rem;
  background-image: url('../../assets/images/top-bg.jpg');
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 0.3rem;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(23, 36, 55, 0.7);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  span {
    position: absolute;
    font-size: 0.5rem;
    color: #fff;
    right: 0.3rem;
    top: 0.3rem;
  }
}

.lists {
  width: 100%;
  min-height: 100%;
  background: url('../../assets/images/bg.png') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: fixed;
  top: 2.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0rem 0.3rem 1.3rem;
  left: 0;

  .title {
    width: 100%;
    position: absolute;
    top: 0.4rem;
    left: 0rem;
    padding: 0 0.3rem;

    h2 {
      position: absolute;
      font-size: 0.4rem;
      color: #fff;
      bottom: 1.2rem;

      b {
        font-size: 0.6rem;
      }
    }

    p {
      position: absolute;
      font-size: 0.24rem;
      color: #fff;
      bottom: 0.75rem;
    }

    .dot {
      width: 0.08rem;
      height: 0.25rem;
      border-radius: 0.1rem;
      background: #ff5b73;
      display: block;
      position: absolute;
      top: -0.55rem;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.8);

      &.left {
        left: 1rem;
      }

      &.right {
        right: 1rem;
      }
    }
  }

  .top {
    color: #fff;
    display: flex;
    align-items: center;
    height: 0.9rem;
    margin-bottom: 0.1rem;

    span {
      margin-right: 0.1rem;
    }
  }

  .item-wrapper {
    padding-bottom: 0.35rem;
    overflow: hidden;
    height: calc(100vh - 4.8rem);

    .item {
      width: 100%;
      display: flex;
      padding-bottom: 0.35rem;
      align-items: center;

      .pic {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 0.08rem;
        margin-right: 0.2rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0.08rem;
        }
      }

      .txt {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        flex: 1;

        .name {
          font-size: 0.28rem;
          color: rgba(255, 255, 255, 1);
          margin-bottom: 0.13rem;
        }

        .author {
          font-size: 0.24rem;
          color: rgba(255, 255, 255, 0.6);

          b {
            border: 1px solid #ff5b73;
            border-radius: 0.04rem;
            padding: 0 0.05rem;
            transform: scale(0.7);
            display: inline-block;
            color: #ff5b73;
          }

          span {
            &:after {
              content: '/';
              margin: 0 0.06rem;
            }

            &:last-child:after {
              content: '';
            }
          }
        }
      }

      .more {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.4rem;
      }
    }
  }
}
</style>
